<template>
    <div>
        <div style="margin-bottom: 10px;">
            <div style="display:inline-block">
                <date-picker-rang v-model="selectTime"></date-picker-rang>
            </div>

            <div style="display:inline-block; margin-left: 20px;">
                <el-input
                    size="mini"
                    @keyup.enter.native="handleIconClick"
                    v-model="pagination.params.searchValue"
                    placeholder="工号/姓名"
                    clearable
                >
                </el-input>
            </div>
            <div style="display:inline-block; margin-left: 20px">
                <el-button @click="handleIconClick">查询</el-button>
            </div>
            <div style="display:inline-block; margin-left: 20px;">
               <el-button type="primary"
                   @click="exportToExcel">导出excel</el-button>
            </div>
        </div>
        <div>
            <dd-table
                height="calc(100vh - 200px)"
                :data="tableData"
                :config="config"
                border
                :loading="loading"
                @filter-change="filterHandler"
                :current-page="pagination.currentPage"
                :total="pagination.total"
                @current-change="changePage"
                :page-size="pagination.pageSize"
                @size-change="handleSizeChange"
            >
            </dd-table>
        </div>
    </div>
</template>
<script>
import commonApi from '@/api/common.js'
import { Notification } from 'element-ui'
// 在线座席业务明细表
export default {
    data () {
        return {
            loading: false,
            filtersList: [],
            tableData: [],
            // 表格配置
            config: [
                {
                    label: '序号',
                    prop: 'indexnum',
                    width: '60'
                },
                {
                    label: '日期',
                    prop: 'datemsg',
                    'show-overflow-tooltip': true
                },
                {
                    label: '组别',
                    prop: 'groupName',
                    'show-overflow-tooltip': true,
                    'column-key': 'group',
                    filters: []
                },
                {
                    label: '工号',
                    prop: 'agentId',
                    'show-overflow-tooltip': true
                },
                {
                    label: '姓名',
                    prop: 'agentName',
                    'show-overflow-tooltip': true
                },
                {
                    label: '接入数',
                    prop: 'enterNum',
                    'show-overflow-tooltip': true
                },
                {
                    label: '消息量',
                    prop: 'msgNum',
                    'show-overflow-tooltip': true
                },
                {
                    label: '客户消息量',
                    prop: 'custMsgNum',
                    'show-overflow-tooltip': true
                },
                {
                    label: '客服消息量',
                    prop: 'agentMsgNum',
                    'show-overflow-tooltip': true
                },
                {
                    label: '转接量',
                    prop: 'switchNum',
                    'show-overflow-tooltip': true
                },
                {
                    label: '撤销消息量',
                    prop: 'revacationNum',
                    'show-overflow-tooltip': true
                },
                {
                    label: '客服关闭',
                    prop: 'agentCloseNum',
                    'show-overflow-tooltip': true
                },
                {
                    label: '客户关闭',
                    prop: 'custCloseNum',
                    'show-overflow-tooltip': true
                }
            ],
            selectTime: ['', ''],
            pagination: {
                currentPage: 1,
                total: 0,
                pageSize: 20,
                // 0 不导出 1导出
                isExport: '0',
                params: {
                    searchValue: '',
                    selectTime: [],
                    group: []
                }
            }
        }
    },
    created () {},
    watch: {},
    mounted () {
        this.getTableData()
    },
    computed: {
        // getHeight () {
        //     return this.$store.state.common.tableHeight
        // }
    },
    methods: {
      // 导出excel表
    exportToExcel () {
      this.pagination.isExport = '1'
      let tHeader = []
      let filterVal = []
      for (let item of this.config) {
        filterVal.push(item.prop)
        tHeader.push(item.label)
      }
      commonApi.getOnlineBusinessDetail(this.pagination).then(response => {
        if (response.retcode === '0') {
          require.ensure([], () => {
            const { export_json_to_excel } = require('@/utils/vendor/Export2Excel.js')
            const list = response.data.info
            const data = this.formatJson(filterVal, list)
            export_json_to_excel(tHeader, data, '在线座席业务明细表')
          })
        } else {
          Notification.error('数据返回失败')
        }
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
        filterHandler (val) {
            this.pagination.params.group = val['group']
            this.getTableData()
        },
        handleIconClick () {
            this.getTableData()
        },
        // 切换页码
        changePage (val) {
            this.pagination.currentPage = val
            this.getTableData()
        },
        // 可以调整每页条数
        handleSizeChange (val) {
            this.pagination.pageSize = val
            this.getTableData()
        },
        // 获取数据表
        getTableData () {
            // 参数有待确认
            // 去除时间筛选为空
            this.loading = true
            this.pagination.params.selectTime[0] =
                this.selectTime[0] !== ''
                    ? this.formmatDate(this.selectTime[0], 'yyyy-MM-dd')
                    : ''
            this.pagination.params.selectTime[1] =
                this.selectTime[1] !== ''
                    ? this.formmatDate(this.selectTime[1], 'yyyy-MM-dd')
                    : ''
            commonApi
                .getOnlineBusinessDetail(this.pagination)
                .then(response => {
                    this.loading = false
                    if (response.retcode === '0') {
                        this.tableData = response.data.info
                        this.pagination.total = response.data.total
                        this.config[2]['filters'] = response.data.filterList
                    } else {
                        Notification.error('数据返回失败')
                    }
                })
        }
    }
}
</script>
<style scoped>
.left {
    float: left;
    width: 20%;
    border: 1px solid #1f92ef;
}

.right {
    float: left;
    width: 79%;
    border: 1px solid #1f92ef;
}
</style>
